<template>
  <div class="accont-security">
    <h2>Account Security</h2>
    <el-row class="user-info">
      <el-col :span="12">
        <div class="user-avatar">
          <el-avatar :size="50" :src="circleUrl"></el-avatar>
          <div class="user-kyc">
            <div class="kyc-name">
              <div v-if="nickName">
                <p v-if="nickname === ''">Set Nickname</p>
                <p v-else>{{nickname}}</p>
                <i class="el-icon-edit" @click="nickName = false"></i>
              </div>
              <div v-else>
                <el-input type="text" v-model="nickForm.nick_name"></el-input>
                <span @click="changeNick">保存</span>
              </div>
            </div>
            <P>
              KYC Verification
              <i :class="verIcon"></i>        
            </P>
            <a
              :class="[{verifyClass: isVerify}, {pendingClass: isPending}]"
              @click="verifyPhone"
            >{{verifyTitle}}</a>
          </div>
        </div>
        <div class="user-phone">
          <p>
            Phone Number
            <i v-if="someinfo.phone" class="el-icon-circle-check"></i>
            <i v-else class="el-icon-warning"></i>
          </p>
          <span v-if="someinfo.phone">{{someinfo.phone | hideMobileInfo}}</span>
          <a
            v-else
            :class="[{verifyClass: isVerify}, {pendingClass: isPending}]"
            @click="verifyClick('/phonever')"
          >Bind Phone ></a>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="user-grade">
          <p class="enlightenment">Enlightenment</p>
          <p class="grade-lv">LV5</p>
          <a :class="[{verifyClass: isVerify}]">Details ></a>
        </div>
        <div class="user-email">
          <p>
            Email
            <i v-if='someinfo.email' class="el-icon-circle-check"></i>
            <i v-else class="el-icon-warning"></i>
          </p>
          <span v-if="someinfo.email">{{someinfo.email | hideEmailInfo}}</span>
          <a
            v-else
            :class="[{verifyClass: isVerify}, {pendingClass: isPending}]"
            @click="verifyClick('/emailver')"
          >Bind Email ></a>
        </div>
      </el-col>
    </el-row>
    <h2>Security</h2>
    <div class="security">
      <ul>
        <li>
          <p class="types-of">Login Password</p>
          <i class="el-icon-circle-check"></i>
          <span>Change login password</span>
          <p class="change" @click="verifyClick('/changeLogin')">Change</p>
        </li>
        <el-divider></el-divider>
        <li>
          <p class="types-of">Phone Verification</p>
          <i v-if="someinfo.phone" class="el-icon-circle-check"></i>
          <i v-else class="el-icon-warning-outline"></i>
          <span>Recieve verification code for security setting</span>
          <p class="change" @click="changePhone">Change</p>
          <p v-if="someinfo.phone" class="change-phone">{{someinfo.phone | hideMobileInfo}}</p>
        </li>
        <el-divider></el-divider>
        <li>
          <p class="types-of">Email Verification</p>
          <i v-if="someinfo.email" class="el-icon-circle-check"></i>
          <i v-else class="el-icon-warning-outline"></i>
          <span>Link an email for login and security setting</span>
          <p v-if="someinfo.email" class="change-phone">{{someinfo.email | hideEmailInfo}}</p>
          <p v-else class="change" @click="changeEmail">Change</p>
        </li>
        <el-divider></el-divider>
        <li>
          <p class="types-of">Fund Password</p>
          <i v-if="someinfo.fund_password_isset" class="el-icon-circle-check"></i>
          <i v-else class="el-icon-warning-outline"></i>
          <span>For token trasfer and withdrawal</span>
          <p class="change" @click="changeFund">Change</p>
          <p class="change" @click="verifyClick('/fundPassword')" v-if="someinfo.fund_password_isset">Forgot Password |</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { changeNickname } from '@/api/userLogin' 
export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      isVerify: true,
      nickName: true,
      isPending: false,
      verIcon: 'el-icon-warning-outline',
      verifyTitle: "verify >",
      nickForm: {
        nick_name: ''
      }
    };
  },
  computed: {
    ...mapGetters({
      someinfo: "someinfo",
      nickname: "nickname"
    })
  },
  created() {
    this.$nextTick(() => {
      let kycSet = this.someinfo.kyc_set
      switch(kycSet) {
        case 0:
          this.isVerify = true
          this.isPending = false
          this.verifyTitle = "verify >"
          this.verIcon = "el-icon-warning-outline"
          break;
        case 1:
          this.isPending = true
          this.verIcon = "el-icon-circle-check"
          this.verifyTitle = "Verification Unsuccessful"
          break;
        case 2:
          this.isPending = true
          this.verifyTitle = 'Anteque Aq'
          this.verIcon = "el-icon-warning-outline"
          break;
       default:
          this.isPending = true
          this.verifyTitle = "Pending"
          this.verIcon = "el-icon-more-outline"
        }
    })
  },
  methods: {
    verifyClick(path) {
      this.$router.push({
        path: path
      });
    },
    /**
     * [verifyPhone description]
     * kyc 认证
     * ------------------------------
     * @Author   LLP
     * @DateTime 2019-12-25T11:23:02+0800
     * @return   {[type]}                 [description]
     */
    verifyPhone() {
      this.$router.push({
        path: '/kyc',
        query: {
          kycSet: this.someinfo.kyc_set,

        }
      });
    },
    /**
     * [changePhone description]
     * 判断是否设置手机
     * ---------------------------------
     * @Author   LLP
     * @DateTime 2019-12-25T11:22:08+0800
     * @return   {[type]}                 [description]
     */
    changePhone() {
      if (this.someinfo.phone) {
        this.verifyClick('/changePhone') 
      } else {
        this.verifyClick('/phonever') 
      }
    },
    /**
     * [changeEmail description]
     * 判断是否设置邮箱
     * ---------------------------------
     * @Author   LLP
     * @DateTime 2019-12-25T11:21:32+0800
     * @return   {[type]}                 [description]
     */
    changeEmail() {
      if (this.someinfo.email) {
        this.verifyClick('/changeEmail') 
      } else {
        this.verifyClick('/emailver')
      }
    },
    /**
     * [changeFund description]
     * 判断是否设置资金密码
     * ----------------------------------
     * @Author   LLP
     * @DateTime 2019-12-25T11:20:30+0800
     * @return   {[type]}                 [description]
     */
    changeFund() {
      let setFun = this.someinfo.fund_password_isset
      if (setFun) {
        this.verifyClick('/changeFund')
      } else {
        this.verifyClick('/fundPassword')
      }
    },
    /**
     * [changeNick description]
     * 设置昵称
     * ----------------------------
     * @Author   LLP
     * @DateTime 2019-12-25T18:03:14+0800
     * @return   {[type]}                 [description]
     */
    async changeNick() {
      let param = {
        ...this.nickForm
      }
      let { data } = await changeNickname(param)
      if ( data === null ) {
        this.$message({
          message: 'Nickname set successfully.',
          type: 'success'
        })
        this.$store.dispatch('getNickname')
        this.nickName = true
      }
    }
  }
};
</script>
<style lang="less" scoped>
.accont-security {
  h2 {
    font-size: 28px;
  }
  .user-info {
    padding: 20px;
    margin: 30px 0;
    background: #ffffff;
    .verifyClass {
      color: #5274b5;
      font-size: 14px;
      border-bottom: 1px solid #5274b5;
    }
    .pendingClass {
      color: #ffffff;
      font-size: 14px;
      border-bottom: 1px solid #ffffff;
    }
    .user-avatar {
      padding: 12px;
      height: 95px;
      background: #faaf48;
      border-radius: 5px;
      margin-right: 10px;
      .user-kyc {
        padding-left: 15px;
        display: inline-block;
        p {
          font-size: 16px;
        }
        i {
          color: #ffffff;
        }
        .kyc-name {
          color: #ffffff;
          i {
            cursor: pointer;
          }
          .el-input {
            width: 80px;
            height: 18px;
            display: inline-block;
          }
          p {
            display: inline-block;
            padding-right: 10px;
          }
          span {
            cursor: pointer;
            padding-left: 5px;
            border-bottom: 0px;
          }
        }
        span {
          color: #ffffff;
          border-bottom: 1px solid #ffffff;
        }
      }
    }
    .user-phone {
      margin-top: 30px;
      font-size: 13px;
      border-right: 2px solid #ebebec;
      i {
        font-size: 15px;
        padding-left: 5px;
      }
      p {
        color: #b5b3b7;
        line-height: 25px;
      }
      span {
        font-weight: 600;
      }
    }
    .user-grade {
      height: 95px;
      border-radius: 5px;
      margin-left: 10px;
      padding-top: 25px;
      background: #fcd49e;
      p {
        font-size: 14px;
        display: inline-block;
      }
      .grade-lv {
        background: #221f1f;
        color: #f9ed58;
        padding: 3px 15px;
        position: absolute;
        right: 20px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
      }
      .enlightenment {
        color: #f6e556;
        padding: 3px 15px;
        background: #b2803a;
        position: absolute;
        right: 65px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
      }
      a {
        position: absolute;
        right: 25px;
        top: 80px;
      }
    }
    .user-email {
      font-size: 13px;
      padding: 30px 0 0 15px;
      p {
        color: #b5b3b7;
        line-height: 25px;
      }
      i {
        font-size: 15px;
        padding-left: 5px;
      }
      span {
        font-weight: 600;
      }
    }
  }
  .security {
    background: #ffffff;
    margin-top: 20px;
    ul {
      padding: 20px;
      li {
        p {
          font-size: 14px;
          color: #231f20;
          display: inline-block;
        }
        .types-of {
          width: 160px;
        }
        i {
          display: inline-block;
          padding-right: 50px;
          font-size: 14px;
        }
        span {
          color: #b5c9e4;
        }
        .change-phone {
          float: right;
          padding-right: 10px;
        }
        .change {
          color: #5274b5;
          float: right;
          padding-right: 5px;
          cursor: pointer;
        }
      }
    }
  }
  .el-icon-circle-check {
    color: #A5D7A8;
  }
  .el-icon-warning {
    color: #F7AD67;
  }
}
</style>
<style lang="less">
  .accont-security {
    .el-input .el-input__inner {
      width: 80px;
      height: 20px;
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-radius: 0;
      background:#faaf48;
      padding:0 0 0 5px;
      border-bottom: 1px solid #ccc;
    }
  }
</style>